//1.根据数据 动态渲染 课程内容
//Render函数的用法  new Render(容器元素,数据)
//之后 使用创建出来的对象的 render方法  才能实现渲染效果
//获取容器元素
var lessonUl = document.querySelector("#lesson");
function LessonRender(ele, data) {
    Render.call(this, ele, data);//对象冒充集成 
    //LessonRender 创建 的 对象  就会拥有 Render构造函数 绑定的属性和方法了
    //属性：ele   data
    //方法：render  setContent
    this.setContent = function (item, element) {
        //设置li的内容
        element.innerHTML = `<div class="top">
        <img src="${item.src}" alt="" class="m">
        <p>${item.num}人在学习</p>
    </div>
    <div class="bottom">
        <div class="left">
            <span>${item.title}</span>
            <span class="time">${item.time}课时</span>
        </div>
        <div class="right">${item.isFree == true ? '免费学习' : '付费学习'}</div>
    </div>`
    }
}

//初始化一个 实际数据变量
var currentData = onlineData;//初始为全部数据

//我们首页 只渲染 前十二条数据  因此 我们应该 对数据 进行处理  截取前12条 
var firstPageData = onlineData.slice(0, 12);
var obj = new LessonRender(lessonUl, firstPageData);
obj.render();
//2.获取页码容器
var pageUl = document.querySelector(".pageNum>ul")
//渲染页码
function renderPages(data, container) {
    //1.计算页码数量
    var pages = Math.ceil(data.length / 12);
    //2.根据页数 渲染页码
    for (var i = 0; i < pages; i++) {
        var li = document.createElement("li");
        li.innerText = i + 1;
        container.appendChild(li);
    }
    //让第0个页码 默认高亮
    var pageNums = container.children;
    pageNums[0].className = "active";
    //不确定的值  渲染的数据、容器元素
}
renderPages(onlineData, pageUl)


//分类渲染
var subject = document.querySelector("#subject");//学科分类ul
var subjects = document.querySelectorAll("#subject>li");//学科分类li

//先将事件 添加给所有元素 共同的父元素
subject.onclick = function () {
    //判断 实际触发事件的 元素 是不是li
    var e = window.event;
    if (e.target.nodeName == "A") {
        //按照 相应的学科 筛选整理数据
        var sub = e.target.parentNode.getAttribute("obj");//获取学科
        //声明一个变量 记录整理好的数据
        var collectionArr = [];
        if (sub == "1") {
            //证明用户选择了全部
            collectionArr = onlineData;
        } else {
            //证明用户选择了 某一个分类科目 就要对全部数据 进行筛选了
            //循环全部数据
            for (var j = 0; j < onlineData.length; j++) {
                //判断 如果满足当前科目分类的标准 就追加到collectionArr
                if (onlineData[j].subject == sub) {
                    collectionArr.push(onlineData[j]);
                }
            }
        }
        //在分类数据处理好之后 我们要用的当前数据 就是分类的数据了
        currentData = collectionArr;
        //清空 原本课程内容
        lessonUl.innerHTML = "";
        //先将原本的页码清空
        pageUl.innerHTML = "";

        //排他思想 让当前被点击的分类高亮 其他分类 不高亮
        for (var k = 0; k < subjects.length; k++) {
            subjects[k].style.background = "transparent";
            subjects[k].children[0].style.color = "#333";
        }
        e.target.parentNode.style.background = "#80C4AE";
        e.target.style.color = "#fff";


        //防止报错 提升性能
        if (collectionArr.length == 0) {
            return false;//打断函数执行
        }
        //调用LessonRender构造函数 渲染内容
        var firstData = collectionArr.slice(0, 12);
        var obj = new LessonRender(lessonUl, firstData);
        obj.render();



        //动态修改 页码数量
        //在重新根据当前数据 渲染
        renderPages(collectionArr, pageUl)
        var pages = pageUl.children;//获取到所有页码
        
        //将当前所在页的索引 重置为0
        n = 0;

        //处理上下页按钮 是否高亮效果
        gray(pages)

        
    }
}


//切换上下页
var pageBtns = document.querySelectorAll(".pageNum>button");
//下一页按钮
var n = 0; //声明一个变量 记录当前正在显示的页的索引
//声明一个函数 用来处理上下页按钮是否灰掉
function gray(eles) {
    //判断 如果在第0页 就让上一页按钮 字体变灰 否则字体为黑色
    if (n == 0) {
        pageBtns[0].className = ""
    }
    else {
        pageBtns[0].className = "active";
    }
    //判断 如果在最后一页 就让下一页按钮 字体变灰 否则 字体为黑色
    if (n == eles.length - 1) {
        pageBtns[1].className = ""
    }
    else {
        pageBtns[1].className = "active";
    }
    //不确定的数据 页码
}
function next() {
    //切换后十二条课程内容
    n++;//1 2
    //获取页码
    var pages = pageUl.children;
    //如果超过最后一页 就定在最后一页 不往后切换
    if (n > pages.length - 1) {
        n = pages.length - 1;
        return false;
    }
    //如果超过第0页 就定在第0页 不往前切换
    if (n < 0) {
        n = 0;
        return false;
    }
    gray(pages)
    //在分页的时候  我们使用的是  分类操作完之后的数据
    //获取currentData中后十二条数据
    var data = currentData.slice(n * 12, (n + 1) * 12);
    //清空当前课程内容
    lessonUl.innerHTML = "";
    //使用构造函数 创建对象 并调用对象的render方法 即可重新渲染内容
    var obj = new LessonRender(lessonUl, data);
    obj.render();


    //让当前正在显示的页 对应的页码高亮 其他页码不高亮
    for (var i = 0; i < pages.length; i++) {
        pages[i].className = "";
    }
    pages[n].className = "active";
}
pageBtns[1].onclick = next

pageBtns[0].onclick = function () {
    n -= 2;
    next();
}

